<template>
  <div class="q-pa-md" style="max-width: 300px">
    <form
      @submit.prevent.stop="onSubmit"
      @reset.prevent.stop="onReset"
      class="q-gutter-md"
    >
      <t-input
        ref="nameRef"
        filled
        v-model="name"
        label="Your name *"
        hint="Name and surname"
        lazy-rules
        :rules="nameRules"
      />

      <t-input
        ref="ageRef"
        filled
        type="number"
        v-model="age"
        label="Your age *"
        lazy-rules
        :rules="ageRules"
      />

      <t-toggle v-model="accept" label="I accept the license and terms" />

      <div>
        <t-btn label="Submit" type="submit" color="primary" />
        <t-btn
          label="Reset"
          type="reset"
          color="primary"
          flat
          class="q-ml-sm"
        />
      </div>
    </form>
  </div>
</template>

<script>
  import { useQuasar } from '@teld/q-components';
  import { ref } from 'vue';

  export default {
    setup() {
      const $q = useQuasar();

      const name = ref(null);
      const nameRef = ref(null);

      const age = ref(null);
      const ageRef = ref(null);

      const accept = ref(false);

      return {
        name,
        nameRef,
        nameRules: [val => (val && val.length > 0) || 'Please type something'],

        age,
        ageRef,
        ageRules: [
          val => (val !== null && val !== '') || 'Please type your age',
          val => (val > 0 && val < 100) || 'Please type a real age',
        ],

        accept,

        onSubmit() {
          nameRef.value.validate();
          ageRef.value.validate();

          if (nameRef.value.hasError || ageRef.value.hasError) {
            // form has error
          } else if (accept.value !== true) {
            $q.notify({
              color: 'negative',
              message: 'You need to accept the license and terms first',
            });
          } else {
            $q.notify({
              icon: 'done',
              color: 'positive',
              message: 'Submitted',
            });
          }
        },

        onReset() {
          name.value = null;
          age.value = null;

          nameRef.value.resetValidation();
          ageRef.value.resetValidation();
        },
      };
    },
  };
</script>
